$main-nav-breakpoint: 769px;

@mixin large-nav {
  @media (min-width: $main-nav-breakpoint) {
    @content;
  }
}

@mixin small-nav {
  @media (max-width: $main-nav-breakpoint - 1px) {
    @content;
  }
}

#main-nav {
  z-index: 100;
  background: $white;
  min-height: $header-height-mobile;
  width: 100%;
  transition: top 0.4s ease;
  box-shadow: 0 0 50px 2px transparent;

  @include large-nav {
    min-height: $header-height;

    &.is-sticky {
      position: fixed;
      top: -100%;
    }
  }

  &.is-open,
  &.is-sticky {
    box-shadow: 0 0 50px 2px $hab-gray;
  }

  &.is-visible {
    top: 0;
  }

  &.has-sidebar,
  &.try-hab {
    background: $hab-off-white;
  }

  @include small-nav {
    position: fixed;
  }
}

.main-nav--container {
  max-width: rem-calc(1200);
  margin: 0 auto;
}

.main-nav--logo {
  @include grid-column(3);

  a {
    display: block;
  }

  h1 {
    @include hide-text;
    background: url("../images/habitat-logo.svg") no-repeat left 40%;
    background-size: rem-calc(89) auto;
    color: $white;
    height: $header-height-mobile;
    margin-bottom: 0;
    min-width: rem-calc(89);

    @include large-nav {
      background-size: rem-calc(170) auto;
      min-width: rem-calc(170);
      height: $header-height;
    }
  }
}

.main-nav--links-wrap {
  @include large-nav {
    @include grid-column(9);
  }
}

.main-nav--links {
  position: relative;
  display: none;
  clear: both;
  margin-bottom: 0;
  @extend .no-bullet;

  & > li {
    padding: rem-calc(15) 0 0 rem-calc(5);

    &.main-nav--link {
      margin-top: 0;
    }
  }

  @include breakpoint(small only) {
    left: map-get($grid-column-gutter, small)/2;
  }

  @include breakpoint(medium) {
    left: 0;
  }

  @include large-nav {
    display: block;
    float: right;
    clear: none;
    padding-top: rem-calc(40);
    height: $header-height;

    & > li {
      display: inline-block;
      vertical-align: middle;
    }

    .main-nav--link {
      padding: 0 rem-calc(25) 0 0;
    }
  }

  @media (min-width: 820px) {
    .main-nav--link {
      padding: 0 rem-calc(30) 0 0;
    }
  }
}

.main-nav--link {
  a {
    position: relative;
    color: $body-font-color;
    transition: color 0.2s ease;

    &:hover,
    &:active,
    &:focus,
    &.is-current-page {
      color: $hab-primary;
    }

    @include large-nav {
      &.is-current-page:before {
        content: "";
        position: absolute;
        background: url("../images/nav-active-icon.png") no-repeat center top;
        background: url("../images/nav-active-icon.svg") no-repeat center top;
        background-size: auto 100%;
        width: 120%;
        height: rem-calc(18);
        top: rem-calc(-45);
        left: -10%;
      }
    }
  }

  @include small-nav {
    &:last-child {
      padding-bottom: rem-calc(30);
    }
  }
}

.main-nav--cta {
  float: right;
  padding: rem-calc(4) rem-calc(20) 0 0;

  .button {
    @include button;
    margin: rem-calc(7) 0 0 0;
    padding: 0.85em 1em;

    @include large-nav {
      margin: 0;
      padding: 0.85em 1.65em;
    }

    &:hover {
      @include primary-button;
    }
  }

  @include small-nav {
    font-size: rem-calc(14);
  }

  @include large-nav {
    padding: rem-calc(30) 0 0 0;
  }

  @media (max-width: 292px) {
    display: none;
  }
}

.main-nav--toggle {
  float: right;
  display: none;
  width: rem-calc(20);
  height: rem-calc(18);
  margin: rem-calc(20) rem-calc(20) 0 0;
  cursor: pointer;
  transition: all 0.2s ease;

  @include small-nav {
    display: inline-block;
  }

  svg rect {
    transition: fill 0.2s ease;
  }

 .is-open & {
    transform: rotate(90deg);

    svg .bar {
      fill: $hab-orange;
    }
  }
}
